/**
 * Created by fanweihua on 2016/12/2.
 */
import React from 'react';
import ProgressHtml from './progressHtml.js'

const Progress = React.createClass({
    getInitialState: function () {
        return {
            html: ProgressHtml.html,
            javaScriptHtml: ProgressHtml.javaScriptHtml
        };
    },
    render(){
        return (
            <div className="Z_slideIn">
                <div className="page slideIn">
                    <div className="Z_content_code">
                        <div dangerouslySetInnerHTML={{__html: this.state.html}}></div>
                        <div dangerouslySetInnerHTML={{__html: this.state.javaScriptHtml}}></div>
                    </div>
                </div>
                <div className="Z_content">
                    <div className="Z_panel-body-backgound">
                        <ProgressNav></ProgressNav>
                    </div>
                </div>
            </div>
        )
    }
});
module.exports = Progress;
const ProgressNav = React.createClass({
    componentDidMount: function () {
        ProgressHtml._go();
    },
    render(){
        return (
            <div className="Z_panel-body">
                <div className="page__hd">
                    <h1 className="page__title">Progress</h1>
                    <p className="page__desc">进度条</p>
                </div>
                <div className="page__bd page__bd_spacing">
                    <div className="weui-progress">
                        <div className="weui-progress__bar">
                            <div className="weui-progress__inner-bar js_progress" style={{width: "0%"}}></div>
                        </div>
                        <a href="javascript:;" className="weui-progress__opr">
                            <i className="weui-icon-cancel"></i>
                        </a>
                    </div>
                    <br></br>
                    <div className="weui-progress">
                        <div className="weui-progress__bar">
                            <div className="weui-progress__inner-bar js_progress" style={{width: "50%"}}></div>
                        </div>
                        <a href="javascript:;" className="weui-progress__opr">
                            <i className="weui-icon-cancel"></i>
                        </a>
                    </div>
                    <br></br>
                    <div className="weui-progress">
                        <div className="weui-progress__bar">
                            <div className="weui-progress__inner-bar js_progress" style={{width: "80%"}}></div>
                        </div>
                        <a href="javascript:;" className="weui-progress__opr">
                            <i className="weui-icon-cancel"></i>
                        </a>
                    </div>
                    <div className="weui-btn-area">
                        <a href="javascript:;" className="weui-btn weui-btn_primary" id="btnUpload">上传</a>
                    </div>
                </div>
            </div>
        );
    }
});